<template>
    <div class="container">
        <div class="batch-operation"></div>
        <div class="table">
            <div class="theader">
                <div class="left">
                    <a-checkbox class="checkbox" value="1">布防</a-checkbox>
                    <a-checkbox class="checkbox" value="2">事件</a-checkbox>
                    <a-checkbox class="checkbox" value="3">橡皮擦</a-checkbox>
                </div>
                <div class="right">
                    <span>编辑</span>
                    <el-popconfirm
                        title="确定批量删除吗"
                        @confirm="batchDelete"
                        confirm-button-text="确定"
                        cancel-button-text="取消"
                    >
                        <template #reference>
                            <span class="batch-delete">
                                <DeleteOutlined class="icon" />
                                <span>删除全部</span>
                            </span>
                        </template>
                    </el-popconfirm>
                </div>
            </div>
            <Day
                v-for="(item, i) in week"
                :key="item.day"
                :dayIndex="i"
                :day="item"
                :getDay="getDay"
                :getCopyDays="getCopyDays"
            />
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { cloneDeep } from "lodash";
import { DeleteOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import Day from "./Day.vue";
import { WEEK } from "./interface";

const indeterminate = ref(false);
const checkAll = ref(false);

const week = ref([
    { day: WEEK.MONDAY, timelines: [], checked: false, delete: false },
    { day: WEEK.TUESDAY, timelines: [], checked: false, delete: false },
    {
        day: WEEK.WEDNESDAY,
        timelines: [],
        checked: false,
        delete: false,
    },
    {
        day: WEEK.THURSDAY,
        timelines: [],
        checked: false,
        delete: false,
    },
    { day: WEEK.FRIDAY, timelines: [], checked: false, delete: false },
    {
        day: WEEK.SATURDAY,
        timelines: [],
        checked: false,
        delete: false,
    },
    { day: WEEK.SUNDAY, timelines: [], checked: false, delete: false },
]);

const onCheckSingleChange = (index) => {
    const _week = cloneDeep(week.value);
    let _indeterminate = false;
    let _checkAll = false;

    _week[index].checked = !_week[index].checked;
    _week.forEach((day) => {
        if (day.checked) {
            _indeterminate = true;
        }
    });

    if (!_week.find((day) => !day.checked)) {
        _indeterminate = false;
        _checkAll = true;
    }

    week.value.splice(0, week.value.length, ..._week);
    indeterminate.value = _indeterminate;
    checkAll.value = _checkAll;
};

const onCheckAllChange = (e) => {
    const _week = cloneDeep(week.value);
    _week.forEach((day) => {
        day.checked = e.target.checked;
    });
    week.value.splice(0, week.value.length, ..._week);
    indeterminate.value = false;
    checkAll.value = e.target.checked;
};

const getDay = (timelines, dayIndex) => {
    const _week = cloneDeep(week.value);
    const index = timelines.findIndex((slider) => slider.border === true);

    _week[dayIndex].delete = index > -1;
    _week[dayIndex].timelines = timelines;

    week.value.splice(0, week.value.length, ..._week);
    console.log("getDay", timelines, dayIndex, _week, week.value);
};

const getCopyDays = (timelines, dayIndexs) => {
    const _week = cloneDeep(week.value);
    dayIndexs.forEach((index) => {
        _week[index].timelines = timelines;
    });

    week.value.splice(0, week.value.length, ..._week);
};

const batchDelete = () => {
    let del = false;
    week.value.forEach((day) => {
        if (day.checked) {
            del = true;
            day.timelines = [];
            day.checked = false;
        }
    });

    if (!del) {
        message.error("请先选择一个数据");
    }

    indeterminate.value = false;
    checkAll.value = false;
};
</script>

<style scoped>
.container {
    width: 1072px;
    padding: 20px;
    margin: 0 auto;
}
.batch-operation {
    height: 40px;
    width: 1030px;
    display: flex;
    line-height: 40px;
    justify-content: flex-end;
}
.batch-delete {
    color: #f00 !important;
    cursor: pointer;
}
.icon {
    margin-right: 5px;
}
.table {
    width: 1030px;
    background: #f5f7fa;
    padding-bottom: 6px;
    box-sizing: border-box;
}
.theader {
    display: flex;
    justify-content: space-between;
    /* height: 54px; */
    background: #fff;
    padding: 6px 0;
    color: rgba(0, 0, 0, 0.85);
    font-weight: bold;
    box-sizing: border-box;
}
.period {
    width: 752px;
    height: 100%;
    padding: 16px 15px;
    text-align: left;
}
</style>
